<template>
  <div>
    <One />
    <button @click="obj.count++">add:count1:{{ obj.count }}</button>
    <button @click="count++">add:count2:{{ count }}</button>
  </div>
</template>

<script>
import One from "./components/One";

export default {
  name: "App",
  components: {
    One,
  },
  data() {
    return {
      obj: {
        count: 0,
      },
      count: 2,
    };
  },
  //provide配置项:向后代组件提供数据,这种书写方式是没有响应式的
  /* provide() {
    return {
      count: this.count,
    };
  }, */

  //在data中把数据放在一个对象中,然后再次提供数据,这样就可以有响应式了
  /* provide() {
    return {
      obj: this.obj,
    };
  }, */

  //提供的时候不再提供一个数据,而是提供一个函数,将来使用数据的时候调用函数
  provide() {
    return {
      count: () => this.count,
    };
  },
};
</script>

<style></style>
